<template>
  <div class="hyperlink_dialog">
    <el-dialog v-model="dialogVisible" title="跳转到报表" width="600px" top="0">
      <div class="hyperlink_dialog_body">
        <el-form label-position="left" v-model="form" label-width="100px">
          <el-form-item v-if="showLinkType" label="穿透类型：">
            <el-select @change="reportChange" filterable v-model="form.linkType" placeholder="请选择" no-data-text="无数据"
                       clearable>
              <el-option v-for="(item, index) in linkTypeList" :label="item.name" :value="item.value" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.linkType === 1" label="选择报表：">
            <el-select @change="reportChange" filterable v-model="form.reportId" placeholder="请选择" no-data-text="无数据"
                       clearable>
              <el-option v-for="(item, index) in reportList" :label="item.name" :value="item.id" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item v-else label="自定义页面：">
            <el-input v-model="form.linkUrl" placeholder="例:http://www.abc.com?id=123&name="></el-input>
          </el-form-item>
          <el-form-item label="链接打开：">
            <el-radio-group v-model="form.openType">
              <el-radio :label="1">浏览器新窗口</el-radio>
              <el-radio :label="2">浏览器当前窗口</el-radio>
              <el-radio :label="3">浏览器当前弹框</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.openType === 3" label="弹框大小：">
            <div style="display: flex;">
              <div style="display: flex;">
                <span style="padding-right: 10px;">宽</span>
                <el-input style="width: 100px;" v-model="form.dialogW"></el-input>
              </div>
              <div style="display: flex;">
                <span style="padding-left: 10px;padding-right: 10px;">高</span>
                <el-input style="width: 100px;" v-model="form.dialogH"></el-input>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div style="text-align: left;margin-bottom: 10px;">
          <el-button @click="addParams" :icon="Plus" text>添加参数</el-button>
        </div>
        <div class="params_main">
          <div class="params_item" v-for="(item, index) in form.params" :key="index">
            <div class="params_content">
              <el-input size="small" v-model="item.key" style="width: 150px;" placeholder="参数key"></el-input>
              <el-select size="small" v-model="item.type" style="width: 150px;" no-data-text="无数据">
                <el-option v-for="(item, index) in paramTypes" :label="item.name" :value="item.value"
                           :key="index"></el-option>
              </el-select>
              <el-input placeholder="参数value" size="small" style="width: 150px;" v-if="item.type === 2"
                        v-model="item.value"></el-input>
              <el-select no-data-text="无数据" placeholder="请选择" size="small" style="width: 150px;" v-else
                         v-model="item.value">
                <el-option v-for="(item, index) in columns" :label="item.name" :value="item.value"
                           :key="index"></el-option>
              </el-select>
            </div>
            <div style="width: 14px; height: 14px; cursor: pointer;" @click="removeParams(index)">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="p_remove">
                <path fill="currentColor" d="M352 480h320a32 32 0 1 1 0 64H352a32 32 0 0 1 0-64z"></path>
                <path fill="currentColor"
                      d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z">
                </path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="hide">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, onMounted, getCurrentInstance } from 'vue'
import { Plus } from "@element-plus/icons-vue"
const columns = ref([])
const linkTypeList = [
  {
    name: "穿透到报表",
    value: 1,
  },
  {
    name: "穿透到自定义页面",
    value: 2,
  },
]
const paramTypes = [
  {
    name: "传递动态字段值",
    value: 1,
  },
  {
    name: "传递固定值",
    value: 2,
  },
]
const reportList = ref([
  {
    "name":"分栏报表",
    "id":"action_8_1"
  },
    {
      "name":"交叉冻结行列",
      "id":"action_3_2"
    }
]);
const showLinkType = ref(false);
const dialogVisible = ref(false)
const form = reactive({
  reportName: "",
  reportId: "",
  openType: 1,
  params: [],
  version: 1,  // 版本
  reportType: "",  // 报表类型
  linkType: 1,   // 1.穿透到报表  2.穿透到自定义页面
  linkUrl:"",    // 自定义页面
  dialogW:640,  // 弹框宽
  dialogH:360,  // 弹框高
})

const addParams = () => {
  let obj = {
    key: "",
    type: 1,
    value: ''
  }
  console.log(form);
  form.params.push(obj)
}
const removeParams = (i) => {
  form.params.splice(i, 1)
}
const reportChange = (val) => {
  for (const r of reportList.value) {
    if (r.id == val) {
      form.version = r.version;
      form.reportType = r.type;
      form.reportName = r.name;
      break
    }
  }
}
onMounted(() => {
})
const submit = () => {
  emits("submit", _.cloneDeep(form))
  hide()
}
const emits = defineEmits([
  "submit"
]);
const resetFrom = () => {
  form.reportName = "";
  form.reportId = "";
  form.openType = 1;
  form.params = [];
  form.version = 1;
  form.reportType = ""
}
const show = (val, isShow) => {
  showLinkType.value = isShow
  if (val) {
    // console.log('1111----val = ',val)

    for (const key in val) {
      // console.log('3333----key', key)
      if (key in form) {
        // console.log('4444--key:',key, val[key],form[key])
        form[key] = val[key]
      }else{
        // console.log('55555----',key, val[key])

      }
    }
    columns.value = val.columnsList
  }else{
    // console.log('22222----val = null/false')
  }
  dialogVisible.value = true;
}
const hide = () => {
  dialogVisible.value = false;
  resetFrom()
}

defineExpose({
  show, hide
})
</script>
<style lang='scss' scoped>
.hyperlink_dialog {
  :deep(.el-dialog__header) {
    text-align: left;

    span {
      font-size: 16px;
      color: #4c5161
    }
  }

  :deep(.el-dialog__body) {
    border-top: 1px solid #e4e7ed;
    display: flow-root;
    min-height: 60px;
    padding: 10px 25px 20px;
  }

  .params_main {
    .params_item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .params_content {
        border: 1px dashed #d9d9d9;
        border-radius: 5px;
        padding: 7px 8px;
        width: calc(100% - 50px);
        display: flex;
        justify-content: space-evenly;
        margin-right: 10px;
      }
    }
  }
}
</style>
